<template>
    <div>
        <Nav>
            <div slot="left" @click="goBack"> &lt; </div>
            <div slot="center">解决方案-评估</div>
            <div slot="right" >···</div>
        </Nav>
        <Scroll class="content" :probeType="3" :pullUpload="true" ref="scroll">
            <div class="wrap">
                <div class="image" ><img :src="imageDate[imgindex].cover" alt="" @load="refresh"></div>
                <!-- <div class="indroduce"></div> -->
                <assessment-list :funcAction="funcAction" :that="this" ></assessment-list>
                <div class="start">
                    <div class="btn" @click="gotoStart">开始评估</div>
                </div>
            </div>
        </Scroll>
    </div>
</template>

<script>
import {request} from '@/network/request.js';
import Nav from '@/components/common/Nav.vue';
import Scroll from '@/components/common/scroll/Scroll.vue';
import AssessmentList from './AssessmentList';
    export default {
        data() {
            return {
                imageDate:[{cover:""}],
                imgindex:0,
                action:[],
                attitude:[],
                ability:[],
                funcAction:{},
            }
        },
        components: {
            Scroll,
            Nav,
            AssessmentList
        },
        mounted () {
            this.getImageData();
            // 拿到路由的query参数
            // console.log(this.$route.query);

        },
        methods: {
            gotoStart(){
                this.$router.push({
                    path:'/assessment/start',
                    query:{
                        index:this.imageDate[this.$route.query.index].id
                    }
                })
            },
            refresh(){
                this.$refs.scroll.refresh()
                console.log(this.$refs.scroll.scroll.scrollerHeight);
            },
            goBack() {
                this.$router.go(-1); 
            },
            async getImageData() {
                try {
                    let res = await request({
                    url:'api/assessment/index'
                    })
                    this.imgindex = this.$route.query.index
                    this.imageDate = res.data.data;
                    // console.log(this.imageDate);
                    this.getIntroduceData(this.imgindex);
                } catch (error) {
                    console.log(error);
                }
            },
            // 动作的请求方法
            async getIntroduceData(index){
                try {
                    let res = await request({
                url:'api/assessment/assmessment_list',
                data:{
                    id:this.imageDate[index].id
                }
                })
                console.log(this.imageDate[index].id);
                res.data.data.forEach(item => {
                    if(item.type === 0){
                        this.action.push(item)
                    }else if(item.type === 1){
                        this.ability.push(item)
                    }
                    else if(item.type === 2){
                        this.attitude.push(item)
                    }
                });
                this.funcAction = {
                    action:this.action,
                    ability:this.ability,
                    attitude:this.attitude
                }
                // console.log(this.funcAction);
                setTimeout(()=>{
                    this.refresh()
                },500)
                    
                } catch (error) {
                console.log(error);
                }
                
            }
        },
    }
</script>

<style  scoped>
.image{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: -1;
}
.select{
    position: absolute;
    bottom: 50px;
    color: #fff;
    text-align: center;
    left: 50%;
    margin-left: -80px;
}
.select img{
    width: 9px;
    height: 15px;
    vertical-align: middle;
    transform: rotate(-90deg);
    margin-bottom: 10px;
}

.image img{
        width: 100%;
}
.content{
    height: 600px;
}
.wrap{
    position: relative;
}
.start{
    width: 100%;
}
.btn{
    font-size: 16px;
    height: 50px;
    width: 325px;
    margin: 84px auto 0 auto;
    color: #fff;
    text-align: center;
    line-height: 50px;
    border-radius: 25px;
    background: -moz-linear-gradient(left, #1fcbcf 0%, #0484c3 100%);
    background: -webkit-gradient(linear,  top left,  bottom left, color-stop(0%,#1fcbcf), color-stop(100%,#0484c3));
    background: -webkit-linear-gradient(left, #1fcbcf 0%,#0484c3 100%);
    background: -o-linear-gradient(left, #1fcbcf 0%,#0484c3 100%);
    background: -ms-linear-gradient(left, #1fcbcf 0%,#0484c3 100%);
    background: linear-gradient(to right, #1fcbcf 0%,#0484c3 100%);

}
</style>